<style>
    *{margin: 0;padding: 0;}
    html,body{
        height: 100%;
        background: #fff;
    }
    .xueT {
    width: 200px;
    height: 20px;
    border: solid #fff 1px;
}
.xueT span {
    height: 20px;
    display: inline-block;
    background-color: red;
}
#box{
    width: 50px;
    height: 50px;
    position: absolute;
    background: pink;
    display: none;
}

</style>

<body>
    <div class="xueT">
        <span style="width: 200px;"></span>
    </div>
    <button></button>
</body>
<script>
  timer=setInterval(function() {
    var spanObj = document.querySelector('.xueT span')
    var width = parseInt(spanObj.style.width)
    width-=5
    spanObj.style.width = width + 'px'
    if(spanObj.style.width==0+'px'){
     return   clearInterval(timer)
    }
}, 1000)


function random(min,max){
   return Math.floor(Math.random()*(max-min+1)+min);
}   
    setInterval(function(){
        var imgobj=document.createElement('img')
        imgobj.src="./star.gif";
        imgobj.width=random(20,70);
        imgobj.style.position='absolute';
        var maxLeft=(window.innerWidth || document.documentElement.clientWidth)-imgobj.width;
        var maxTop=(window.innerHeight || document.documentElement.clientHeight)-imgobj.width;
        imgobj.style.left=random(0,maxLeft)+'px';
        imgobj.style.top=random(0,maxTop)+'px';
        document.body.appendChild(imgobj)

    },1000)
    var str=0;
    document.body.onclick=function(evt){
        var e = evt || window.event;
        var target = e.target || e.srcElement;
        var boxobj=document.querySelector("#box")
       if (target.nodeName == 'IMG'){
        document.body.removeChild(target)}
             str+=1
        var btnobj=document.querySelector('button')
           btnobj.innerText=str
    }   
 
</script>